<template>
	<a-modal :footer="null" :visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="600px">
		<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finishFailed="onFinishFailed" @finish="onFinish">
   
			<a-form-item label="商品名称" name="pro_name">
				<!-- <a-input v-model:value="formState.name" placeholder="请输入商品名称" /> -->
				<a-select
					ref="select"
					v-model:value="formState.pro_name"
					:disabled="disabled"
					@focus="focus"
					@change="handleChange"
					placeholder="请输入商品名称"
				>
      <a-select-option :value="item.pro_name" v-for="item in namelist" :key="item.id">{{item.pro_name}}</a-select-option>
    
    </a-select>
			</a-form-item>
			
			<a-form-item label="材质柔软（评分）" name="material_score">
				<a-rate v-model:value="formState.material_score" />
			 
				<!-- <a-input v-model:value="formState.material_score" type="text" 
					onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" placeholder="请输入材质柔软（评分）" />
		 -->
		</a-form-item>
			<a-form-item label="材质柔软（备注）" name="material">
				<a-input v-model:value="formState.material" type="text" placeholder="请输入材质柔软（备注）" />
			</a-form-item>
			<a-form-item label="刺激体验（评分）" name="ex_score">
 
	 	<a-rate v-model:value="formState.ex_score" />
	</a-form-item>
			<a-form-item label="刺激体验（备注）" name="ex">
				<a-input v-model:value="formState.ex" type="text" placeholder="请输入刺激体验（备注）" />
			</a-form-item>
			<a-form-item label="保养清洁（评分）" name="clean_score">
				 	<a-rate v-model:value="formState.clean_score" />
		 	</a-form-item>
			<a-form-item label="保养清洁（备注）" name="clean">
				<a-input v-model:value="formState.clean" type="text" placeholder="请输入保养清洁（备注）" />
			</a-form-item>
			<a-form-item label="品牌调性（评分）" name="tonality_score">
								 	<a-rate v-model:value="formState.tonality_score" />
	 	</a-form-item>
			<a-form-item label="品牌调性（备注）" name="tonality">
				<a-input v-model:value="formState.tonality" type="text" placeholder="请输入品牌调性（备注）" />
			</a-form-item>

			<!-- <a-form-item label="产品图片" name="cover">
				<UPLOAD ref="uploadbox" :desc="'图片上传'" :num="1" @sendStatus="backimgurl" v-model:value="formState.cover" />
			</a-form-item> -->

			<a-form-item label="定位人群" name="person">
				<a-textarea v-model:value="formState.person" placeholder="请输入产品详情" :auto-size="{ minRows: 3, maxRows: 5 }" />
			</a-form-item>
			<!-- <a-form-item label="推荐首页" name="is_recd">
				<a-switch v-model:checked="formState.is_recd" />
			</a-form-item> -->

			<!-- <a-form-item label="选择方式" name="sale_type">
				<a-radio-group v-model:value="formState.sale_type">
					<a-radio :value="'1'"> 直售 </a-radio>
					<a-radio :value="'2'"> 预售 </a-radio>
				</a-radio-group>
			</a-form-item> -->

			<!-- <a-form-item label="自定义时间" name="datetime" v-if="formState.sale_type == '2'">
				<a-range-picker style="width: 400px" v-model:value="formState.datetime" show-time
					format="YYYY-MM-DD HH:mm:ss" />
			</a-form-item> -->
			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" html-type="submit">确定</a-button>
				<a-button style="margin-left: 10px" @click="handleCancel">取消</a-button>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script>
import {
	defineComponent,
	reactive,
	ref,
	onMounted,
	nextTick,
	computed,
	getCurrentInstance
} from 'vue'
import moment from 'moment'
import { useStore, mapGetters } from 'vuex'
import { UPLOAD } from '/@/components'
import { addAlbumByGet, addGoodsByGet, updateGoods_get,getProductName } from '/@/api'
export default defineComponent({
	props: {
		model: {
			type: Object,
			default: function () {
				return {}
			}
		},
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		cid: null
	},
	emits: {
		'close-modal': null,
		ok: null
	},
	components: {
		UPLOAD
	},
	setup(props, context) {
		const formRef = ref()
		const uploadbox = ref(null)
		const disabled=ref(false)
		const formState = reactive({
			sale_type: '1',
			is_recd: false,
			goods_type: "1",
			datetime: [],
			limit_buy: "0",
			  
		})
		const cate = ref([])
		const ablumlist = ref([])
		const namelist=ref([])
		let validateImg = async (_rule, value) => {
			if (value == '') {
				return Promise.reject('请上传图片')
			} else {
				return Promise.resolve()
			}
		}
		const rules = {
			material_score: [{
		 
				required: true,
				message: '请输入材质柔软评分',
			 
			}],
			material:[{
				required: true,
				message: '请输入材质柔软备注',
				trigger: 'blur'
			}
			],
			ex_score:[
				{
				required: true,
				message: '请输入刺激体验评分',
 
			}
			],
				ex:[
				{
				required: true,
				message: '请输入刺激体验备注',
				trigger: 'blur'
			}
			],
			clean_score:[
					{
				required: true,
				message: '请输入清洁评分',
	 
			}
			],
		 	clean:[
					{
				required: true,
				message: '请输入清洁备注',
				trigger: 'blur'
			}
			],
			tonality_score:[
					{
				required: true,
				message: '请输入品牌调性评分',
		 
			}
			],
				tonality:[
					{
				required: true,
				message: '请输入品牌调性备注',
				trigger: 'blur'
			}
			],
			person:[{
				required: true,
				message: '请输入产品详情',
				trigger: 'blur'
			}],
			pro_name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
				// {
				// 	min: 3,
				// 	max: 5,
				// 	message: 'Length should be 3 to 5',
				// 	trigger: 'blur'
				// }
			],
			datetime: [
				{
					type: 'array',
					required: true,
					message: '请选择时间',
					trigger: 'change'
				}
			],
			cover: [
				{
					required: true,
					message: '请上传图片',
					trigger: 'blur'
				}
			],

			is_recd: [
				{
					required: false,
					message: '请选择是否推荐首页'
				}
			],

			goods_cate_id: [
				{
					required: true,
					message: '请选择分类',
					trigger: 'blur'
				}
			],
			goods_album_id: [
				{
					required: false,
					message: '请选择专辑',
					trigger: 'blur'
				}
			],
			name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
			],
			goods_stock: [
				{
					required: true,
					message: '请输入数量',
					trigger: 'blur'
				}
			],
			tokenID: [{
				required: true,
				message: "请输入商品ID",
				trigger: 'blur'
			}],
			price: [
				{
					required: true,
					message: '请输入价格',
					trigger: 'blur'
				}
			],
			intro: [
				{
					required: true,
					message: '请输入商品详情',
					trigger: 'blur'
				}
			],
			weight: [
				{
					required: true,
					message: '请选择商品克重',
					trigger: 'blur'
				}
			],
			place: [{
				required: true,
				message: '请输入产地',
				trigger: 'blur'
			}],

			pro_name: [{
				required: true,
				message: '请输入商品品名',
				trigger: 'blur'
			}],
		 
			liner_type: [{
				required: true,
				message: '请输入内胆类型',
				trigger: 'blur'
			}],
			ex_categories: [{
				required: true,
				message: '请输入体验类型',
				trigger: 'blur'
			}]
		}

		const onFinish = (values) => {
			context.emit('ok', {
				model: props.model,
				values
			})
		}

		const onFinishFailed = (errorInfo) => {
			console.log('Failed:', errorInfo)
			// console.log(uploadbox.value.list)
		}
		const handleCancel = () => {
			context.emit('close-modal', false)
		}
		const resetForm = () => {
			formRef.value.resetFields()
		}
		const backimgurl = (n) => {
			console.log(n)
			formState.cover = n.toString()
		}
		const changecate = (id) => {
			addGoodsByGet(id).then((res) => {
				const {
					result: { list }
				} = res
				ablumlist.value = list
			})
		}
		const stopInput = (e) => {
			var value = e.target._value;
			console.log(value)
		}
		const getName=()=>{
      getProductName().then((res)=>{
				const {result:{list}}=res;
        namelist.value=list;
			})
		}
		onMounted(() => {
			const {
				edit,
			clean,
			clean_score,
			cover,
			ex,
			ex_score,
			id,
			is_del,
			material,
			material_score,
			pro_name,
			person,
			product_id,
			status,
			tonality,
			name,
			tonality_score
			} = props.model
			getName()
			if (edit) {
				disabled.value=true;
				formState.pro_name = name
				formState.clean = clean
				formState.clean_score = clean_score*1
				formState.ex = ex
				formState.material = material
				formState.ex_score=ex_score*1
				formState.material_score =material_score*1
				formState.person = person
				formState.tonality = tonality;
				formState.tonality_score = tonality_score*1
				// nextTick(() => {
				// 	uploadbox.value.fileList.push({
				// 		status: 'done',
				// 		url: `${cover}`,
				// 	})
				// 	uploadbox.value.list.push(`${cover}`)
				// })

			}
		})

		return {
			formRef,
			namelist,
			labelCol: {
				span: 6
			},
			wrapperCol: {
				span: 14
			},
			other: '',
			formState,
			rules,
			handleCancel,
			resetForm,
			backimgurl,
			uploadbox,
			onFinish,
			onFinishFailed,
			cate,
			changecate,
			ablumlist,
			stopInput,
			disabled
		}
	}
})
</script>